<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" label-width="45px" label-position="right">
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="省份" prop="provinceId">
                                <province v-model="query.provinceId" :name.sync="query.provinceName"></province>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="市区" prop="cityId">
                                <city v-model="query.cityId" :province="query.provinceId" :name.sync="query.cityName"></city>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="区县" prop="areaId">
                                <region v-model="query.areaId" :city="query.cityId" :name.sync="query.areaName"></region>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="submit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="dataList">
                <el-row :gutter="20">
                    <el-col :span="8" class="data-item" v-loading='loadingData1'>
                        <div class="item">
                            <div class="title">新增用户（今日）</div>
                            <div class="data">{{dataStatic.todayData1}}</div> 
                            <div class="compare" v-show='dataStatic.percentum1!==null'>对比昨日
                                 <span :class="{'minus':dataStatic.percentage1<0,'add':dataStatic.percentage1>0}">
                                      {{dataStatic.percentum1}}
                                 </span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8" class="data-item" v-loading='loadingData2'>
                        <div class="item">
                            <div class="title">登录次数（今日）</div>
                            <div class="data">{{dataStatic.todayData2}}</div> 
                            <div class="compare" v-show='dataStatic.percentum2!==null'>对比昨日 
                                <span :class="{'minus':dataStatic.percentage2<0,'add':dataStatic.percentage2>0}">
                                    {{dataStatic.percentum2}}
                                </span>
                            </div> 
                        </div>
                    </el-col> 
                    <el-col :span="8" class="data-item" v-loading='loadingData3'>
                        <div class="item">
                            <div class="title">活跃用户（昨日）</div>
                            <div class="data">{{dataStatic.todayData3}}</div> 
                            <div class="compare" v-show='dataStatic.percentum3!==null'>对比前日 
                                <span :class="{'minus':dataStatic.percentage3<0,'add':dataStatic.percentage3>0}">
                                    {{dataStatic.percentum3}}
                                </span>
                            </div>  
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div slot="eCharts1" >
                <div class="charts-title">用户增长趋势图</div>
                <div class="charts-display" v-loading='trendChart1Loading'>
                    <trendChart width='100%' height='100%' id="trendChart1" :option='trendChart1Option'></trendChart>
                </div>
            </div>
            <div slot="eCharts2" >
                <div class="charts-title">用户活跃趋势图
                    <el-select class="el-select" v-model="selectData" placeholder="请选择"
                     @change="change"> 
                        <el-option value='day' label="日活跃用户趋势">日活跃用户趋势</el-option>
                        <el-option value='month' label="月活跃用户趋势">月活跃用户趋势</el-option> 
                    </el-select>
                </div>
                <div class="charts-display" v-loading='trendChart2Loading'>
                   <trendChart width='100%' height='100%' id="trendChart2" :option='trendChart2Option'></trendChart>
                </div>
            </div>
            <div slot="chartsList" >
                <el-row :gutter="20">
                    <el-col :span="12" class="data-item">
                        <div class="item">
                            <div class="charts-title">用户类型分布（{{userTypeTotal}}人）</div>
                            <div class="charts-display" v-loading='pieChart1Loading'>
                                <trendChart width='100%' height='100%' id="pieChart1" :option='pieChart1Option'></trendChart>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12" class="data-item">
                        <div class="item">
                            <div class="charts-title">区域注册分布（{{areaSignTotal}}人）</div>
                            <div class="charts-display" v-loading='pieChart2Loading'>
                                <trendChart width='100%' height='100%' id="pieChart2" :option='pieChart2Option'></trendChart>
                            </div>
                        </div>
                    </el-col> 
                </el-row>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    import trendChart from 'components/Charts/trendChart';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import { regionRegisterUser, userActiveByMonthAnalysis, userActiveByDayAnalysis, startTimes, activeUsers, userGrowthToday, userTypeByRegionCount, userGrowthTrend30} from 'api/pingtaifenxi';
    export default{
        name: 'dataOverview',
        components: {trendChart, province, city, region, echartsLayout},
        data() {
            return {
                loadingData1: false,
                loadingData2: false,
                loadingData3: false,
                trendChart1Loading: false,
                trendChart2Loading: false,
                pieChart1Loading: false,
                pieChart2Loading: false,
                formState: false,
                dataListState: false,
                eCharts1State: false,
                eCharts2State: false,
                eCharts3State: true,
                chartsListState: false,
                tableState: true,
                userTypeTotal: 0,
                areaSignTotal: 0,
                query: {
                    provinceId: '',
                    cityId: '',
                    areaId: '',
                    provinceName: '',
                    cityName: '',
                    areaName: ''
                },
                selectData: 'day',
                trendChart1Option: null,
                trendChart2Option: null,
                pieChart1Option: null,
                pieChart2Option: null,
                dataStatic: {
                    percentage1: null,
                    todayData1: '--',
                    percentum1: '--',
                    percentage2: null,
                    todayData2: '--',
                    percentum2: '--',
                    percentage3: null,
                    todayData3: '--',
                    percentum3: '--',
                    yesterdayData3: null 
                },
                filterList: null
            }
        },
        computed: {
        },
        created() {
            this.getTotal2Data();// 启动次数
            this.getTotal3Data();// 活跃用户
            this.getTotal1Data();// 新增用户(今日)
            this.getTrendChart1();// 用户增长趋势图
            this.getPieChart1();// 用户类型分布
            this.getPieChart2();// 区域注册分布
            this.getTrendChart2();// 用户活跃趋势图
        },
        methods: {
            submit() {
                this.getTotal2Data();// 启动次数
                this.getTotal3Data();
                this.getTotal1Data();// 新增用户(今日)
                this.getTrendChart1();// 用户增长趋势图
                this.getPieChart1();// 用户类型分布
                this.getPieChart2();
                this.getTrendChart2();// // 用户活跃趋势图
            },
           
            // 新增用户(今日)
            getTotal1Data() {
                this.loadingData1 = true;
                let startDate = moment(new Date()).add(-1, 'days').format('YYYY-MM-DD'), // 昨天
                    endDate = moment(new Date()).format('YYYY-MM-DD'); // 今天
                let provinceId=this.query.provinceId;
                let cityId=this.query.cityId;
                let areaId=this.query.areaId;
                userGrowthToday(startDate, endDate, provinceId, cityId, areaId).then(res => {
                    this.loadingData1 = false;
                    this.dataStatic.percentage1= res.data.content.percentage;
                    this.dataStatic.percentum1 = res.data.content.percentage===null?null:res.data.content.percentage+'%';
                    this.dataStatic.todayData1 = res.data.content.number===null?'--':res.data.content.number;
                }).catch(() => {
                    this.loadingData1 = false;
                });
            },

            // 启动次数(今日)
            getTotal2Data() {
                this.loadingData2 = true;
                // let startDate = moment(new Date()).add(-2, 'days').format('YYYY-MM-DD'), // 前天
                    // endDate = moment(new Date()).add(-1, 'days').format('YYYY-MM-DD'), // 昨天
                let startDate = moment(new Date()).add(-1, 'days').format('YYYY-MM-DD'), // 昨天
                    endDate = moment(new Date()).format('YYYY-MM-DD'), // 今天
                    provinceName = this.query.provinceName, 
                    cityName = this.query.cityName, 
                    areaName = this.query.areaName, 
                    provinceId = this.query.provinceId, 
                    cityId = this.query.cityId, 
                    areaId = this.query.areaId;
                startTimes(startDate, endDate, provinceName, cityName, areaName, provinceId, cityId, areaId).then(res => {
                    this.loadingData2 = false;
                    this.dataStatic.percentage2= res.data.content[0].percentage;
                    this.dataStatic.percentum2 = res.data.content[0].percentage===null?null:res.data.content[0].percentage+'%';
                    this.dataStatic.todayData2 = res.data.content[0].todayCount===null?'--':res.data.content[0].todayCount;
                }).catch(() => {
                    this.loadingData2 = false;
                });
            },

            // 活跃用户(昨日)
            getTotal3Data() {
                this.loadingData3 = true;
                let startDate = moment(new Date()).add(-2, 'days').format('YYYY-MM-DD'), // 前天
                    endDate = moment(new Date()).add(-1, 'days').format('YYYY-MM-DD'), // 昨天
                    provinceName = this.query.provinceName, 
                    cityName = this.query.cityName, 
                    areaName = this.query.areaName;
                activeUsers(startDate, endDate, provinceName, cityName, areaName).then(res => {
                    this.loadingData3 = false;
                    this.dataStatic.percentage3= res.data.content[0].percentage;
                    this.dataStatic.percentum3 = res.data.content[0].percentage===null?null:res.data.content[0].percentage+'%';
                    this.dataStatic.todayData3 = res.data.content[0].todayCount===null?'--':res.data.content[0].todayCount;
                }).catch(() => {
                    this.loadingData3 = false;
                });
            },

            // 用户增长趋势图
            getTrendChart1() {
                this.trendChart1Loading = true;
                let provinceId=this.query.provinceId;
                let cityId=this.query.cityId;
                let areaId=this.query.areaId;
                userGrowthTrend30(provinceId, cityId, areaId).then(res => {
                    let dataList=[];
                    let dayList=[];
                    res.data.content.reverse().forEach(val => {
                        dayList.push(val.date)
                        dataList.push(val.number)
                    })
                    this.trendChart1Loading = false;
                    this.trendChart1Option = {
                        color: ['#008000'],
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['用户趋势']
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: dayList  
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '用户趋势',
                                type: 'line',
                                data: dataList 
                            }
                        ]
                    };
                }).catch(() => {
                    this.trendChart1Loading = false;
                });
            },

            // 用户活跃趋势图
            getTrendChart2() {
                this.trendChart2Loading = true;
                let startDate = '', // 前天
                    endDate = ''; // 昨天
                let provinceName = this.query.provinceName, 
                    cityName = this.query.cityName, 
                    areaName = this.query.areaName, 
                    provinceId = this.query.provinceId, 
                    cityId = this.query.cityId, 
                    areaId = this.query.areaId;
                let stateSelect = [];
                if (this.selectData=='day') {
                    stateSelect.push('日活跃用户趋势');
                    startDate = moment(new Date()).add(-30, 'days').format('YYYY-MM-DD'), // 30天前
                    endDate = moment(new Date()).add(-1, 'days').format('YYYY-MM-DD'); // 昨天
                    this.dayActive(startDate, endDate, provinceName, cityName, areaName, provinceId, cityId, areaId, stateSelect);
                } else if (this.selectData=='month') {
                    stateSelect.push('月活跃用户趋势');
                    startDate = moment(new Date()).add(-12, 'month').format('YYYY-MM'), // 前天
                    endDate = moment(new Date()).add(-1, 'month').format('YYYY-MM'); // 昨天
                    this.monthActive(startDate, endDate, provinceName, cityName, areaName, provinceId, cityId, areaId, stateSelect);
                }
            },
            // 日活
            dayActive(startDate, endDate, provinceName, cityName, areaName, provinceId, cityId, areaId, stateSelect) {
                userActiveByDayAnalysis(startDate, endDate, provinceName, cityName, areaName, provinceId, cityId, areaId).then(res => {
                    this.trendChart2Loading = false;
                    let dataList=[];
                    let dayList=[];
                    res.data.content.reverse().forEach(val => {
                        dayList.push(val.date)
                        dataList.push(val.userNumber)
                    })
                    this.trendChart2Option = {
                        color: ['#0098D9'], 
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: stateSelect   
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: dayList 
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: stateSelect[0],
                                type: 'line',
                                data: dataList  
                            }
                        ]
                    };
                }).catch(() => {
                    this.trendChart2Loading = false;
                });
            },
            // 月活、
            monthActive(startDate, endDate, provinceName, cityName, areaName, provinceId, cityId, areaId, stateSelect) {
                userActiveByMonthAnalysis(startDate, endDate, provinceName, cityName, areaName, provinceId, cityId, areaId).then(res => {
                    this.trendChart2Loading = false;
                    let dataList=[];
                    let dayList=[];
                    res.data.content.reverse().forEach(val => {
                        dayList.push(val.date)
                        dataList.push(val.userNumber)
                    })
                    this.trendChart2Option = {
                        color: ['#0098D9'], 
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: stateSelect   
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: dayList 
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: stateSelect[0],
                                type: 'line',
                                data: dataList  
                            }
                        ]
                    };
                }).catch(() => {
                    this.trendChart2Loading = false;
                });
            },
            // 用户类型分布
            getPieChart1() {
                this.pieChart1Loading = true;
                let provinceId=this.query.provinceId;
                let cityId=this.query.cityId;
                let areaId=this.query.areaId;
                userTypeByRegionCount(provinceId, cityId, areaId).then(res => {
                    this.pieChart1Loading = false;
                    this.userTypeTotal=res.data.content[0].allCount;// 总人数
                    let pieList=[];
                    let legendList=[];
                    res.data.content.forEach(item => {
                        if (item.name) {
                            legendList.push(item.name)
                            pieList.push({name: item.name, value: item.count})
                        }
                    })
                    this.pieChart1Option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical', 
                            x: 'left',
                            data: legendList, // ['家长（没有孩子）', '学生', '家长且教师', '教师', '家长']  
                            show: false
                        },
                        calculable: true,
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: '40%',
                                center: ['50%', '50%'],
                                color: ['#2EC7C9', '#B6A2DE', '#5AB1EF', '#FFB980', '#D87A80'],
                                data: pieList
                            }
                        ]
                    };
                    
                }).catch(() => {
                    this.pieChart1Loading = false;
                });
            },
            // 区域注册分布
            getPieChart2() {
                this.pieChart2Loading = true;
                let provinceId=this.query.provinceId;
                let cityId=this.query.cityId;
                let areaId=this.query.areaId;
                regionRegisterUser(provinceId, cityId, areaId).then(res => {
                    this.pieChart2Loading = false;
                    let gotDataList=res.data.content;
                    let legendList=[];
                    let pieList=[];
                    if (gotDataList[0]) {
                        this.areaSignTotal=gotDataList[0].allRegisterUserNumber;// 总人数
                    }
                    gotDataList.forEach(val => {
                        // if (val.registerArea) {
                        //     legendList.push(val.registerArea)
                        //     pieList.push({name: val.registerArea, value: val.registerUserNumber})
                        // }
                        if (val.registerArea) {
                            legendList.push(val.registerArea)
                            pieList.push({name: val.registerArea, value: val.registerUserNumber})
                        } else {
                            legendList.push('未知');
                            pieList.push({name: '未知', value: val.registerUserNumber})
                        }
                    })
                   
                    this.pieChart2Option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: legendList,
                            show: false
                        },
                        calculable: true,
                        series: [
                            {
                                position: 'inner', // 标签的位置
                                name: '访问来源',
                                type: 'pie',
                                radius: '40%',
                                center: ['50%', '50%'],
                                color: ['#2EC7C9', '#B6A2DE', '#5AB1EF', '#FFB980', '#D87A80', '#8D98B3', '#E5CF0D', '#97B552', '#95706D', '#DC69AA'],
                                data: pieList
                            }
                        ]
                    }
                }).catch(() => {
                    this.pieChart2Loading = false;
                });
            },
            change(value) {
                this.selectData = value;
                this.getTrendChart2();
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        $bgcolor: #fff;
        .el-select {
            float: right;
        }
    }
   .echartsLayout-content .charts-list .data-item .item {
    height: 680px;
    }
    // .areaSignTotal
   .echartsLayout-content .charts-list .data-item .item .charts-display {
    height: 640px;
    width: 100%;
}
</style>                     